<template>
  <li>
    <div class="left">
      <img :src="item.poster" alt="" />
    </div>

    <div class="middle">
      <p>
        <span class="name">{{ item.name }}</span>
        <span class="dimension">{{ item.filmType.name }}</span>
      </p>
      <p>
        观众评分
        <span class="grade">{{ item.grade }}</span>
      </p>
      <p>
        <span class="actors"
          >主演：{{ item.actors.map((value) => value.name).join(" ") }}</span
        >
      </p>
      <p>{{ item.nation }} | {{ item.runtime }}分钟</p>
    </div>

    <div class="right">
      <button>购票</button>
    </div>
  </li>
</template>

<script>
export default {
    /* 声明接收父组件传入的props */
    props:[
        "item"
    ]
};
</script>

<style lang="scss" scoped>
@import "@assets/variable.scss";

li {
  border-bottom: 1px solid #eee;
  display: flex;
  padding: 13px;
  padding-bottom: 10px;
  font-size: 13px;
  color: #888;

  .left {
    img {
      width: 66px;
    }
  }

  .middle {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-left: 10px;

    p {
      margin-bottom: 3px;
    }

    span.name {
      color: #222;
      font-size: 16px;
    }

    span.dimension {
      background-color: #ddd;
      color: white;
      font-size: 12px;
      border-radius: 1px;
      margin-left: 5px;
    }

    span.grade {
      color: $myOrange;
    }

    span.actors {
      display: inline-block;
      @include singleLineElipsis(90%);
    }
  }
  .right {
    /* display: flex;
    flex-direction: column;
    justify-content: center; */
    display: flex;
    align-items: center;
    padding: 10px;
    button {
      width: 50px;
      height: 25px;
      line-height: 25px;

      background-color: white;
      color: $myOrange;
      border: 1px solid $myOrange;
      border-radius: 2px;
    }
  }
}
</style>
